<%--
  Created by IntelliJ IDEA.
  User: lxm
  Date: 2018/2/8
  Time: 下午1:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="focus">
    <div class="focusbox">
        <div class="focusimg">
            <ul class="fimglist clearfix">

            </ul>
        </div>
        <div class="focustool">
            <ul class="ftoollist clearfix"><!--通过控制该ul的left值来实现列表的左右移动，增量为931px-->

            </ul>
        </div>
        <a href="#" class="btn_pre" target="_self" style="display:none">上一页</a>
        <a href="#" class="btn_next" target="_self" style="display:none">下一页</a>
    </div>
</div>
<%--词云个性化--%>
<fieldset class="layui-elem-field layui-field-title">
    <legend>词云个性化</legend>
    <div class="layui-field-box">
        <div class="layui-row">
            <div class="layui-col-md12">
                <form class="layui-form layui-form-pane" action="" method="post" id="word-cloud-form">
                    <%--长和宽--%>
                    <div class="layui-form-item">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">长度（px）:</label>
                                <div class="layui-input-block ">
                                    <input type="text" name="cloud-width" autocomplete="off"
                                           class="layui-input form-width-3"
                                           lay-verify="number|widthLimit"
                                           placeholder="默认930px">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">宽度（px）:</label>
                                <div class="layui-input-inline ">
                                    <input type="text" name="cloud-height" autocomplete="off"
                                           class="layui-input form-width-3"
                                           lay-verify="number|widthLimit"
                                           placeholder="默认400px">
                                </div>
                            </div>

                        </div>
                    </div>
                    <%--选项--%>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">可用字体</label>
                            <div class="layui-input-inline form-width-3">
                                <select name="cloud-font" lay-verify="required" lay-search="">
                                    <option value="">直接选择或搜索选择</option>
                                    <option value="华文黑体">华文黑体</option>
                                    <option value="楷体-简">楷体-简</option>
                                    <option value="STHeiti Light">STHeiti Light</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline" style=" margin-left: -10px;">
                            <label class="layui-form-label">图形蒙版</label>
                            <div class="layui-input-inline form-width-3">
                                <select name="cloud-image" lay-verify="required" lay-search="">
                                    <option value="">直接选择或搜索选择</option>
                                    <option value="CIRCLE">圆形词云</option>
                                    <option value="RECTANGLE">矩形词云</option>
                                    <option value="CAT">猫咪🐈</option>
                                    <option value="WHALE">鲸鱼🐳</option>
                                    <option value="EARTH">地球🌍</option>
                                    <option value="DRAGON">龙🐲</option>
                                    <option value="LOGO">logo🏥</option>
                                    <option value="WECHAT">微信气泡</option>
                                    <option value="CLOUD">云☁️</option>
                                    <option value="CLOUD_BG">背景是云☁️</option>
                                    <option value="UNDEFINED">自定义🤮️</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline" style="    margin-left: -13px;">
                            <label class="layui-form-label">背景颜色</label>
                            <div class="layui-input-inline form-width-3">
                                <select name="cloud-color" lay-verify="required" lay-search="">
                                    <option value="">直接选择或搜索选择</option>
                                    <option value="#000000">黑色</option>
                                    <option value="#ffffff">白色</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <%--上传蒙版--%>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="btn-upload-word-cloud-img"
                                        style="width: 112px;">上传图片
                                </button>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" style="max-height: 150px;" id="img-upload-demo1">
                                    <p id="demoText"></p>
                                </div>
                            </div>
                        </div>
                        <blockquote class="layui-elem-quote layui-quote-nm gray-p">小Tips：所上传的图片，所有没有像素的点都会被词填充</blockquote>

                    </div>
                    <%--词云操作--%>
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>可选操作</legend>
                        <div class="layui-field-box">
                            <div class="layui-row">
                                <div class="layui-col-md12">
                                    <div class="layui-btn-container">
                                        <button type="button" class="layui-btn layui-btn-primary" lay-submit="" lay-filter=""
                                                onclick="redrawWordcloud()">
                                            <i class="fa fa-paint-brush" aria-hidden="true">
                                                生成新词云</i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </form>

            </div>
        </div>
    </div>
</fieldset>
